<template>
	<view class="cd-goods-list">
		<view class="cd-goods-item" v-for="item in goodsList" :key="item.id" @click="toDetails(item.id)">
			<image class="cd-goods-item-img" :src="item.list_pic_url" mode="scaleToFill" />
			<view class="cd-goods-item-name">{{ item.name }}</view>
			<view class="cd-goods-item-price">{{ item.retail_price | priceFormat }}</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'cd-goods-list',
	props: {
		goodsList: {
			type: Array,
			default: []
		}
	},
	data() {
		return {};
	},
	methods: {
		toDetails(id) {
			uni.navigateTo({
				url: `/pages/details/details?id=${id}`
			});
		}
	}
};
</script>

<style lang="scss">
.cd-goods-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	// grid-template-rows: 480rpx 480rpx;
	grid-auto-rows: 480rpx;
	gap: 15rpx;
	.cd-goods-item {
		overflow: hidden;
		// background-color: skyblue;
		.cd-goods-item-img {
			width: 372rpx;
			height: 372rpx;
		}
		.cd-goods-item-name {
			font-size: 28rpx;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			text-align: center;
			overflow: hidden;
			height: 22px;
			width: 70%;
			text-overflow: ellipsis;
			white-space: nowrap;
			display: block;
			margin: 0px auto;
			// background: red;
		}
		.cd-goods-item-price {
			margin-top: 14rpx;
			font-size: 26rpx;
			color: var(--price-color);
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>
